<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>编辑被照护人 - 邦伴用户端</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
  <style>
    :root {
      --primary: #ff7e2d;
      --primary-light: #fff3ea;
      --border: #f0f0f0;
      --text-main: #222;
      --text-sub: #888;
    }
    
    body {
      font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
      background-color: #f8f8f8;
      color: var(--text-main);
    }
    
    .app-container {
      width: 375px;
      height: 812px;
      margin: 0 auto;
      background: #fff;
      position: relative;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
      overflow-y: auto;
    }
    
    .primary-color {
      color: var(--primary);
    }
    
    .primary-bg {
      background-color: var(--primary);
    }
    
    .primary-light-bg {
      background-color: var(--primary-light);
    }
    
    .btn-primary {
      background-color: var(--primary);
      color: white;
    }
    
    .btn-outline {
      border: 1px solid var(--primary);
      color: var(--primary);
    }
    
    .form-group {
      margin-bottom: 16px;
    }
    
    .form-label {
      display: block;
      margin-bottom: 8px;
      font-size: 14px;
      color: var(--text-sub);
    }
    
    .form-input {
      width: 100%;
      padding: 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
      font-size: 14px;
    }
    
    .form-input:focus {
      outline: none;
      border-color: var(--primary);
    }
    
    .form-select {
      width: 100%;
      padding: 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
      font-size: 14px;
      background-color: white;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23888' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
    }
    
    .form-select:focus {
      outline: none;
      border-color: var(--primary);
    }
    
    .form-textarea {
      width: 100%;
      padding: 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
      font-size: 14px;
      resize: none;
      min-height: 100px;
    }
    
    .form-textarea:focus {
      outline: none;
      border-color: var(--primary);
    }
    
    .switch {
      position: relative;
      display: inline-block;
      width: 44px;
      height: 24px;
    }
    
    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    
    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      transition: .4s;
      border-radius: 24px;
    }
    
    .slider:before {
      position: absolute;
      content: "";
      height: 18px;
      width: 18px;
      left: 3px;
      bottom: 3px;
      background-color: white;
      transition: .4s;
      border-radius: 50%;
    }
    
    input:checked + .slider {
      background-color: var(--primary);
    }
    
    input:focus + .slider {
      box-shadow: 0 0 1px var(--primary);
    }
    
    input:checked + .slider:before {
      transform: translateX(20px);
    }
    
    .tag-btn {
      display: inline-block;
      padding: 6px 12px;
      border-radius: 20px;
      margin-right: 8px;
      margin-bottom: 8px;
      font-size: 14px;
      cursor: pointer;
    }
    
    .tag-btn.active {
      background-color: var(--primary);
      color: white;
    }
  </style>
</head>
<body>
  <div class="app-container">
    <!-- 顶部导航栏 -->
    <div class="sticky top-0 z-10 bg-white border-b border-gray-100 px-4 py-3 flex items-center">
      <a href="javascript:history.back()" class="mr-2">
        <i class="fas fa-arrow-left text-lg"></i>
      </a>
      <h1 class="text-lg font-medium flex-1 text-center">编辑被照护人</h1>
    </div>
    
    <!-- 编辑被照护人表单 -->
    <div class="p-4">
      <form id="careRecipientForm">
        <!-- 基本信息 -->
        <div class="bg-white rounded-lg p-4 mb-4">
          <h3 class="font-medium mb-4">基本信息</h3>
          
          <div class="form-group">
            <label class="form-label">姓名</label>
            <input type="text" class="form-input" id="name" name="name" value="张爷爷" placeholder="请输入被照护人姓名">
          </div>
          
          <div class="form-group">
            <label class="form-label">性别</label>
            <div class="flex space-x-4">
              <label class="flex items-center">
                <input type="radio" name="gender" value="male" checked class="mr-2">
                <span>男</span>
              </label>
              <label class="flex items-center">
                <input type="radio" name="gender" value="female" class="mr-2">
                <span>女</span>
              </label>
            </div>
          </div>
          
          <div class="form-group">
            <label class="form-label">出生日期</label>
            <input type="date" class="form-input" id="birthday" name="birthday" value="1945-05-10">
          </div>
          
          <div class="form-group">
            <label class="form-label">身份证号</label>
            <input type="text" class="form-input" id="idCard" name="idCard" value="3101********1234" placeholder="请输入身份证号">
          </div>
          
          <div class="form-group">
            <label class="form-label">手机号码</label>
            <input type="tel" class="form-input" id="phone" name="phone" value="138****5678" placeholder="请输入手机号码">
          </div>
          
          <div class="form-group">
            <label class="form-label">与您的关系</label>
            <select class="form-select" id="relationship" name="relationship">
              <option value="">请选择</option>
              <option value="parent">父母</option>
              <option value="grandparent" selected>祖父母</option>
              <option value="spouse">配偶</option>
              <option value="child">子女</option>
              <option value="sibling">兄弟姐妹</option>
              <option value="other">其他</option>
            </select>
          </div>
        </div>
        
        <!-- 健康信息 -->
        <div class="bg-white rounded-lg p-4 mb-4">
          <h3 class="font-medium mb-4">健康信息</h3>
          
          <div class="form-group">
            <label class="form-label">身高(cm)</label>
            <input type="number" class="form-input" id="height" name="height" value="172" placeholder="请输入身高">
          </div>
          
          <div class="form-group">
            <label class="form-label">体重(kg)</label>
            <input type="number" class="form-input" id="weight" name="weight" value="68" placeholder="请输入体重">
          </div>
          
          <div class="form-group">
            <label class="form-label">血型</label>
            <select class="form-select" id="bloodType" name="bloodType">
              <option value="">请选择</option>
              <option value="A">A型</option>
              <option value="B" selected>B型</option>
              <option value="O">O型</option>
              <option value="AB">AB型</option>
            </select>
          </div>
          
          <div class="form-group">
            <label class="form-label">健康状况</label>
            <div class="flex flex-wrap mt-2">
              <button type="button" class="tag-btn active" data-tag="高血压">高血压</button>
              <button type="button" class="tag-btn active" data-tag="糖尿病">糖尿病</button>
              <button type="button" class="tag-btn bg-gray-100 text-gray-700" data-tag="心脏病">心脏病</button>
              <button type="button" class="tag-btn bg-gray-100 text-gray-700" data-tag="关节炎">关节炎</button>
              <button type="button" class="tag-btn bg-gray-100 text-gray-700" data-tag="骨质疏松">骨质疏松</button>
              <button type="button" class="tag-btn bg-gray-100 text-gray-700" data-tag="中风">中风</button>
              <button type="button" class="tag-btn bg-gray-100 text-gray-700" data-tag="帕金森">帕金森</button>
              <button type="button" class="tag-btn bg-gray-100 text-gray-700" data-tag="阿尔茨海默">阿尔茨海默</button>
            </div>
            <input type="hidden" id="healthTags" name="healthTags" value="高血压,糖尿病">
          </div>
          
          <div class="form-group">
            <label class="form-label">备注</label>
            <textarea class="form-textarea" id="notes" name="notes" placeholder="请输入其他需要说明的健康情况">需要定期测量血压，每天按时服用降压药和降糖药。</textarea>
          </div>
        </div>
        
        <!-- 其他设置 -->
        <div class="bg-white rounded-lg p-4 mb-6">
          <div class="flex justify-between items-center">
            <span>设为默认被照护人</span>
            <label class="switch">
              <input type="checkbox" id="isDefault" name="isDefault" checked>
              <span class="slider"></span>
            </label>
          </div>
        </div>
        
        <div class="flex space-x-4">
          <button type="submit" class="flex-1 py-3 btn-primary text-center rounded-lg">保存</button>
          <button type="button" id="deleteBtn" class="flex-1 py-3 bg-gray-100 text-gray-500 text-center rounded-lg">删除</button>
        </div>
      </form>
    </div>
    
    <!-- 删除确认弹窗 -->
    <div id="deleteModal" class="fixed inset-0 bg-black bg-opacity-50 hidden flex items-center justify-center z-50">
      <div class="bg-white rounded-lg w-72 overflow-hidden">
        <div class="p-4 text-center">
          <h3 class="font-medium mb-2">确认删除</h3>
          <p class="text-sm text-gray-500">确定要删除此被照护人信息吗？</p>
        </div>
        <div class="flex border-t border-gray-100">
          <button id="cancelDelete" class="flex-1 py-3 text-center text-gray-500">取消</button>
          <button id="confirmDelete" class="flex-1 py-3 text-center text-red-500">删除</button>
        </div>
      </div>
    </div>
    
    <!-- 保存成功提示 -->
    <div id="saveSuccess" class="fixed inset-0 bg-black bg-opacity-50 hidden flex items-center justify-center z-50">
      <div class="bg-white rounded-lg p-4 flex items-center">
        <i class="fas fa-check-circle text-green-500 mr-2"></i>
        <span>保存成功</span>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 健康标签选择
      const tagButtons = document.querySelectorAll('.tag-btn');
      const healthTagsInput = document.getElementById('healthTags');
      let selectedTags = healthTagsInput.value.split(',');
      
      tagButtons.forEach(button => {
        button.addEventListener('click', function() {
          const tag = this.dataset.tag;
          const index = selectedTags.indexOf(tag);
          
          if (index === -1) {
            // 添加标签
            selectedTags.push(tag);
            this.classList.add('active');
            this.classList.remove('bg-gray-100', 'text-gray-700');
          } else {
            // 移除标签
            selectedTags.splice(index, 1);
            this.classList.remove('active');
            this.classList.add('bg-gray-100', 'text-gray-700');
          }
          
          // 更新隐藏输入值
          healthTagsInput.value = selectedTags.join(',');
        });
      });
      
      // 表单提交
      const careRecipientForm = document.getElementById('careRecipientForm');
      careRecipientForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        // 表单验证
        const name = document.getElementById('name').value;
        const idCard = document.getElementById('idCard').value;
        const relationship = document.getElementById('relationship').value;
        
        if (!name) {
          alert('请输入被照护人姓名');
          return;
        }
        
        if (!idCard) {
          alert('请输入身份证号');
          return;
        }
        
        if (!relationship) {
          alert('请选择与您的关系');
          return;
        }
        
        // 获取表单数据
        const formData = new FormData(this);
        const data = {};
        for (let [key, value] of formData.entries()) {
          data[key] = value;
        }
        
        // 添加是否默认被照护人
        data.isDefault = document.getElementById('isDefault').checked;
        
        console.log('提交的被照护人数据:', data);
        
        // 这里可以添加AJAX请求来保存被照护人
        
        // 显示保存成功提示
        const saveSuccess = document.getElementById('saveSuccess');
        saveSuccess.classList.remove('hidden');
        saveSuccess.classList.add('flex');
        
        // 2秒后自动关闭提示并返回列表页
        setTimeout(() => {
          saveSuccess.classList.add('hidden');
          saveSuccess.classList.remove('flex');
          window.location.href = 'care_recipients.html';
        }, 1500);
      });
      
      // 删除功能
      const deleteBtn = document.getElementById('deleteBtn');
      const deleteModal = document.getElementById('deleteModal');
      const cancelDelete = document.getElementById('cancelDelete');
      const confirmDelete = document.getElementById('confirmDelete');
      
      deleteBtn.addEventListener('click', function() {
        deleteModal.classList.remove('hidden');
        deleteModal.classList.add('flex');
      });
      
      cancelDelete.addEventListener('click', function() {
        deleteModal.classList.add('hidden');
        deleteModal.classList.remove('flex');
      });
      
      confirmDelete.addEventListener('click', function() {
        // 这里可以添加AJAX请求来删除被照护人
        console.log('删除被照护人');
        
        // 删除后返回列表页
        window.location.href = 'care_recipients.html';
      });
      
      // 点击弹窗外部关闭
      deleteModal.addEventListener('click', function(e) {
        if (e.target === deleteModal) {
          cancelDelete.click();
        }
      });
    });
  </script>
</body>
</html> 